<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="7">
                <div class="card-main">
                    <div class="temp-title ">模版分类</div>
                    <div class="margin-10 ">
                        <el-radio-group v-model="deptTemp">
                            <el-radio-button :label="1">个人</el-radio-button>
                            <el-radio-button :label="2">科室</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="border padding-10">
                        <el-button-group>
                            <el-button type="primary" @click="addDiag()"
                                icon="el-icon-circle-plus-outline">增加</el-button>
                            <el-button type="danger" icon="el-icon-delete">删除</el-button>
                            <el-button type="success" icon="el-icon-document">保存</el-button>
                            <el-button type="info" icon="el-icon-top">上移</el-button>
                            <el-button type="info" icon="el-icon-bottom">下移</el-button>
                        </el-button-group>
                    </div>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="card-main">
                    <div class="temp-title ">模版项目</div>
                    <div class="border padding-10">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-circle-plus-outline">增加</el-button>
                            <el-button type="danger" icon="el-icon-delete">删除</el-button>
                            <el-button type="success" icon="el-icon-document">保存</el-button>
                            <el-button type="info" icon="el-icon-top">上移</el-button>
                            <el-button type="info" icon="el-icon-bottom">下移</el-button>
                        </el-button-group>
                    </div>
                    <div>
                        <el-form ref="formAuto" :disabled="false">
                            <el-table ref="table" :data="diagData" border style="width: 100%" max-height="250">
                                <el-table-column type="selection" :width="40" />
                                <el-table-column type="index" :label="'序号'" :width="40" />

                                <el-table-column v-for="(item, index) in diagLabel" :key="index" :prop="item.prop"
                                    :width="item.width" :label="item.label" align="center">
                                    <template v-slot="scope">
                                        <el-form-item :prop="`diagData[` + scope.$index + `].` + [item.prop]"
                                            label-width="0">

                                            <span v-if="item.type === 'name'">{{ scope.row[item.prop] }}</span>

                                            <el-input v-if="item.type === 'string'" v-model="scope.row[item.prop]" />

                                            <el-select v-if="item.type === 'array'" v-model="scope.row[item.prop]"
                                                style="width: 100%;" filterable clearable :multiple="item.multiple"
                                                collapse-tags>
                                                <el-option v-for="item in item.option" :key="item.encode"
                                                    :label="item.name" :value="item.encode" />
                                            </el-select>
                                        </el-form-item>
                                    </template>
                                </el-table-column>

                            </el-table>

                        </el-form>
                    </div>
                </div>
            </el-col>
            <el-col :span="7">
                <div class="card-main">
                    <div class="temp-title ">证型</div>
                    <div class="border padding-10">
                        <el-button-group>
                            <el-button type="primary" icon="el-icon-circle-plus-outline">增加</el-button>
                            <el-button type="danger" icon="el-icon-delete">删除</el-button>
                            <el-button type="success" icon="el-icon-document">保存</el-button>
                            <el-button type="info" icon="el-icon-top">上移</el-button>
                            <el-button type="info" icon="el-icon-bottom">下移</el-button>
                        </el-button-group>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { orderTempSelect } from '@/api/doctor/patient'
export default {
    name: "diag",
    data() {
        return {
            patient: {},
            cusultInfo: {},
            patInfo: true,
            consultType: "2",
            showPage: "1",
            deptTemp: "1",
            deptOrder: "1",
            navType: "1",
            orderTableIndex: "",
            currentdrug: "",
            doctor: { code: "854", name: 'lili', dept: '209' },
            tableData: [],
            diagData: [],
            drugFrom: {
                name: "",
                dose: "",
                doseUnit: "",
                freq: "",
                route: "",
                day: "",
                amount: '',
                remark: ""
            },
            drugList: [
                {
                    name: '阿莫西林分散片', code: 'Y213120000', price: '1.9', unit: "盒"
                },
                {
                    name: '头孢克肟咀嚼片', code: 'Y213120001', price: '3.7', unit: "盒"
                }
            ],
            diagLabel: [
                { label: '类型', width: '100', prop: 'type', type: 'string' },
                { label: 'ICD编码', width: '', prop: 'icd', type: 'string' },
                { label: '诊断名称', width: '', prop: 'diag', type: 'string' },
                { label: '诊断备注', width: '', prop: 'remark', type: 'string' },
            ],

            historyOrder: []



        };
    },
    mounted() {},
    methods: {
        addDiag() {
            const obj = {}
            for (let i = 0; i < this.diagLabel.length; i++) {
                const item1 = this.diagLabel[i].prop
                obj[item1] = undefined
            }
            this.diagData.push(obj)
        },
        saveRecord() {

        }
    }

};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
    height: 100%;
}


.card-main {
    border: 1px solid #d7dae2;
    height: 900px;
    border-radius: 5px;
}

.card-message {
    border: 1px solid #d7dae2;
    height: 900px;
}

.message-title {
    font-weight: 400;
    padding: 10px;
}

.patient-row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.record-item {
    margin: 30px;
}

.label {
    color: #666666;
    width: 7em;
}

.value {
    color: #333333;
    text-align: right;
}

.pat-name {
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;
}

.order-box {
    height: 550px;
    overflow-y: auto;
    border-bottom: 1px solid #dcdfe6;
}

.top-nav {
    margin-top: -35px;
}

.unstyled {
    list-style: none;
}

.d-none {
    display: none;
}

.pull-right {
    float: right;
}

.mb-10 {
    margin-bottom: 10px;
}

.margin-10 {
    margin: 10px;
}

.padding-10 {
    padding: 10px;
}

.temp-box {
    margin: 10px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    height: 260px;
    width: 200px;
    text-align: center;
}

.border {
    border: 1px solid #dcdfe6;
}

.temp-title {
    line-height: 35px;
    color: rgb(65, 144, 255);
    background: rgb(236, 244, 255);
    padding-left: 10px;
}
</style>
